<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf</title>
    <link rel="stylesheet" th:href="@{/css/custom-style.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap/4.1.3/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/webjars/bootstrap-fileinput/4.4.8/css/fileinput.min.css}">
    <script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/4.1.3/js/bootstrap.min.js}"></script>
    <script th:src="@{/webjars/bootstrap-fileinput/4.4.8/js/fileinput.min.js}"></script>
</head>
<body>

<div th:replace="templates::topbar(currentPage='index')"></div>

<div class="container">
    <div class="card shadow-sm">
        <div class="card-body">
            <h1>Upload New Video</h1>
        </div>
        <hr>
        <!--<form id="videoUploadForm" action="/uploadVideo" method="post" enctype="multipart/form-data">-->
        <div class="card-body">
            <div class="form-group">
                <label for="videoNameInput">Video Name</label>
                <input id="videoNameInput" name="videoName" type="text" class="form-control">
            </div>
            <div>
                <span>Video Cover:</span>
                <img id="coverImage" src="/img/defaultVideoCover.png" alt="" width="160px" height="90px"
                     class="rounded">
                <input type="file" id="imageInput" style="display: none;">
                <button id="imageButton" class="btn btn-primary">Upload New Image</button>
            </div>
            <div class="form-group">
                <p>Upload Video:</p>
                <input id="fileInput" name="file"
                       type="file" class="file-loading"
                       multiple>
            </div>
        </div>
        <div class="card-body text-right">
            <button id="uploadButton" class="btn btn-primary">Upload</button>
        </div>
        <!--</form>-->
    </div>
</div>

<script>

    var blob;

    $('#imageButton').click(function () {
        $('#imageInput').click();
    });

    $('#imageInput').change(function (event) {
        var files = event.target.files, file;
        if (files && files.length > 0) {
            file = files[0];
            var blob = new Blob([file]);
            console.log(blob);
            var URL = window.URL || window.webkitURL;
            var imgURL = URL.createObjectURL(file);
            $("#coverImage").attr("src", imgURL);
        }
    });

    $('#fileInput').fileinput({
        uploadUrl: '/uploadVideo',
        uploadAsync: true,
        showUpload: true,
        showRemove: true,
        showPreview: true,
        dropZoneEnabled: true,
        showCaption: true,
        allowedFileExtensions: ['mp4'],
        maxFileSize: 500000,
        maxFileCount: 1
    });


    $('#uploadButton').click(function () {
        var file = document.getElementById('fileInput').files[0];
        var form = new FormData();
        form.append("file", file);
        $('#fileInput').fileinput();
        // $.ajax({
        //     url: '/uploadVideo',
        //     type: 'POST',
        //     processData: false,
        //     contentType: false,
        //     cache: false,
        //     data: form,
        //     success: function (result) {
        //         var params = [
        //             {name: 'videoName', value: $('#videoNameInput').val()},
        //             {name: 'path', value: result.msg}
        //         ];
        //         $.ajax({
        //             url: '/video',
        //             type: 'POST',
        //             data: $.param(params),
        //             success: function (result) {
        //                 $(location).attr('href', '/account');
        //             }
        //         });
        //     }
        // });
    });


</script>

</body>
</html>